<template>
    <div class="page">
        <div class="main-title">
            <span class="left">业绩统计</span>
        </div>

        <div class="page-ctx">
            <div class="tab-box">
                <div class="tab-list">
                    <div v-for="(item, index) in tabList" :key="index" class="tab-item"
                        :class="tabSelect.value == item.value ? 'active' : ''" @click="do_toggle_tab(item)">
                        {{ item.title }}
                        <span class="number">10</span>
                    </div>
                </div>
            </div>

            <div class="flex searchDiv">
                <div class="flex mgr48">
                    <span>自定义时间：</span>
                    <span>
                        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </span>
                </div>
                <div class="flex">
                    <span>企业名称/ID：</span>
                    <span>
                        <el-input></el-input>
                    </span>
                </div>
                <button type="primary" class="btn-search" @click="do_search()">搜索</button>
                <button type="primary" class="btn-reset" @click="do_search()">重置</button>
            </div>

            <div class="fav-box">


                <div class="fav-data-box">
                    <el-table :data="product_list" header-cell-style="background: #F5F5F5;" align="center">
                        <el-table-column prop="id" label="日期">
                        </el-table-column>
                        <el-table-column prop="date" label="企业ID">
                        </el-table-column>
                        <el-table-column prop="date" label="企业名称">
                        </el-table-column>
                        <el-table-column prop="date" label="联系人">
                        </el-table-column>
                        <el-table-column prop="date" label="联系电话">
                        </el-table-column>
                        <el-table-column prop="date" label="订单金额">
                        </el-table-column>
                    </el-table>
                    <div class="zongjie">
                        <el-row>
                            <el-col :span="6">
                                <div>订单笔数总计</div>
                                <div class="mb10">28</div>
                            </el-col>
                            <el-col :span="6">
                                <div>订单总金额</div>
                                <div class="mb10">28</div>
                            </el-col>



                        </el-row>
                    </div>
                    <div class="pagination-box" style="margin-top: 40px;text-align: right;">
                        <el-pagination background layout="total, prev, pager, next" @current-change="mix_current_change"
                            :current-page.sync="pagination.page" :page-size="pagination.pageNum"
                            :total="count"></el-pagination>
                    </div>
                </div>
                <!-- <div class="fav-empty" v-if="!count">
                    <el-empty description="没有查询到收藏信息..."></el-empty>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    components: {},
    data() {
        return {
            tabSelect: {
                title: "全部",
                value: 0,
            },
            product_list: [
            ],
            checkedAll: false,

            pagination: {
                page: 1,
                pageNum: 10,
            },
            count: 0,
        };
    },

    computed: {
        checked_list() {
            return this.product_list.filter((v) => v.checked);
        },
        checked_number() {
            return this.checked_list.length;
        },
        tabList() {
            //scene
            //筛选状态：0-全部 1-待支付 2-待发货 3-待收货 4-待核销 5-已完成 6-待评价 7-已取消
            //orderStatus
            //订单状态：-5-待支付  -1-已取消  2-待发货  3-待收货  4-待自提  5-已完成
            let list = [
                { value: 0, title: "按日汇总", number_key: "orderNum" },
                { value: 1, title: "按月汇总", number_key: "orderNeedPay" },
                { value: 2, title: "按年汇总", number_key: "orderNeedDelivery" },
                // { value: 6, title: "待审核",},
            ];
            return list;
        },
    },

    created() {
        this.setView();
    },

    methods: {
        setView() {
            //  this.query_fav()
        },
        query_fav() {
            this.$api({
                url: "/service.php",
                method: "get",
                data: {
                    action: "product_plist",
                    ifShowSku: 0,
                    shoucang: 1,
                    ...this.pagination,
                },
            }).then((res) => {
                let { code, data, count } = res;
                if (code == 200) {
                    let { count, list } = data;
                    list.forEach((v) => {
                        v.checked = false;
                    });
                    this.product_list = list;
                    this.count = count;
                }
            });
        },

        to_product(item) {
            this.$router.push({
                path: "/product-detail",
                query: {
                    id: item.inventoryId,
                },
            });
        },

        do_toggle_all() {
            this.checkedAll = !this.checkedAll;
            this.product_list.forEach((v) => (v.checked = this.checkedAll));
        },


        do_toggle_item(item) {
            //console.log("切换勾选", { ...item });
            item.checked = !item.checked;
            let hasNotChecked = this.product_list.some((v) => !v.checked);
            if (hasNotChecked) {
                this.checkedAll = false;
            } else {
                this.checkedAll = true;
            }
        },

        do_delete_checked() {
            if (!this.checked_number) {
                alertErr("请选择要移除收藏的商品");
                return;
            }
            let ids = this.checked_list.map((v) => v.id).join();
            this.confirm_cancel(ids)
        },

        //收藏 取消
        do_fav_cancel_item(item) {
            this.confirm_cancel(item.id)
        },

        confirm_cancel(ids) {
            this.$api({
                url: "/service.php",
                method: "get",
                data: {
                    action: "product_bathDelOperate",
                    operateType: 1,//行为类型：1-关注 2-足迹 此接口默认为 1-关注
                    productIds: ids
                },
            }).then((res) => {
                alert(res)
                if (res.code == 200) {
                    this.setView();
                }
            });
        }
    },
};
</script>

<style scoped lang="less">
.reset-btn {
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #B8C4D1;
    font-weight: 400;
    font-size: 14px;
    color: #707070;
    text-align: center;
}

.tab-box {
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    // border: 1px solid #cccccc;

    .tab-list {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: #7d7d7d;

        .tab-item {
            position: relative;
            // min-width: 96px;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
            margin-right: 20px;

            .number {
                color: #EF1F1F;
            }

            &.active {
                // background: #009F39;
                // color: #fff;
                // font-weight: bold;
                // color: #009f39;
                font-weight: 500;
                color: #EF1F1F;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background: #EF1F1F;
                }
            }
        }
    }

    .search-box {
        display: flex;
        align-items: center;
        min-width: 260px;
        height: 32px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #b8c4d1;
        overflow: hidden;

        input {
            background: #fff;
            flex: 2;
            height: 100%;
            border-right: none;
            outline: none;
            padding-left: 10px;
            font-size: 12px;
        }

        button {
            width: 50px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #e2e2e2;
            color: #7d7d7d;

            &:last-child {
                border-left: 0;
            }

            img {
                width: 18px;
            }
        }
    }
}

.zongjie {
    padding: 14px;
    background: #F5F5F5;

    div {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
    }

    .mb10 {
        margin-top: 10px;
    }
}

.content {
    padding-top: 10px;

    .el-col {
        margin-top: 14px;
    }

    span {
        font-weight: 400;
        font-size: 14px;
        color: #333333;

    }
}

.searchDiv {
    margin-bottom: 20px;
    margin-top: 20px;

    span {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 24px;
    }

    .mgr48 {
        margin-right: 10px;
    }

    .btn-search {
        width: 60px;
        height: 36px;
        background: #EF1F1F;
        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 36px;
        text-align: center;
        margin-left: 10px;
    }

    .btn-reset {
        width: 60px;
        height: 36px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #B8C4D1;
        font-weight: 400;
        font-size: 14px;
        color: #707070;
        line-height: 36px;
        text-align: center;
        margin-left: 10px;
    }

}

.img-check {
    cursor: pointer;

    &.check-0 {
        display: block;
    }

    &.check-1 {
        display: none;
    }
}

.checked {
    cursor: pointer;

    .check-0 {
        display: none !important;
    }

    .check-1 {
        display: block !important;
    }
}

.page {
    padding-bottom: 80px;

    .main-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        text-align: left;
        height: 56px;
        line-height: 56px;
        background: #ffffff;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;

    }

    .page-ctx {
        margin-top: 14px;
        padding: 46px 32px;
        background: #fff;

        .left {
            font-family: Poppins, Poppins;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            margin-bottom: 20px;
        }
    }
}

.bottom-info {
    margin-top: 20px;
    margin-bottom: 50px;
}


.fav-box {
    .fav-data-box {
        margin-top: 20px;
    }

    .fav-titles {
        // margin-bottom: 20px;
        padding: 0 24px;

        border: 1px solid #E5E5E5;
        height: 44px;
        background: #F5F5F5;


        font-family: OPPOSans, OPPOSans;
        font-weight: 400;
        font-size: 14px;
        color: #666666;



        .fav-check {
            user-select: none;
            cursor: pointer;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #666666;

            &.checked {
                color: #009F39;
            }


            img {
                width: 13px;
                margin-right: 8px;
            }
        }

        .fav-delete {
            margin-left: 40px;
            cursor: pointer;

            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #666666;

        }
    }


}


.fav-list {
    border: 1px solid #e5e5e5;
    border-top: none;

    .fav-item {
        display: flex;
        align-items: center;
        padding: 24px;
        border-bottom: 1px solid #e5e5e5;

        &:last-child {
            border-bottom: none;
        }

        .fav-check {
            width: 52px;
            text-align: left;

            img {
                width: 13px;
            }
        }

        .goods-img {
            cursor: pointer;

            img {
                width: 100px;
                height: 100px;
                border: 1px solid #eeeeee;
                overflow: hidden;
            }

            /deep/ img {
                width: 100px;
                height: 100px;
                object-fit: cover;
            }
        }

        .goods-title {
            flex: 1;
            text-align: left;
            padding-left: 15px;

            .text-1 {
                cursor: pointer;
                margin-bottom: 15px;
                font-weight: 500;
                font-size: 14px;
                color: #333333;

            }

            .text-2 {
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                line-height: 18px;
            }
        }

        .goods-price {
            min-width: 150px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #4D4D4D;
            line-height: 24px;
        }


        .goods-actions {
            min-width: 300px;

            button {
                &+button {
                    margin-left: 32px;
                }

                &.btn-cancel {
                    font-weight: 400;
                    font-size: 14px;
                    color: #666666;
                }

                &.btn-detail {

                    width: 104px;
                    height: 32px;
                    background: #EF1F1F;
                    border-radius: 4px 4px 4px 4px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 32px;
                }
            }
        }
    }
}
</style>

<style scoped lang="less" src="@/assets/h5css/user/myFavourite.less"></style>